<template>
	<div style="width: 100%; min-height: 600px">
		<div class="panel panel-default" style="width: 95">
			<div class="panel-heading">
				<el-input
					placeholder="回车搜索"
					v-model="input"
					style="width: 70%"
					@keyup.enter.native="search"
					clearable
				>
				</el-input>
				<el-button
					type="primary"
					icon="el-icon-search"
					size="small"
					@click="search"
					>搜索</el-button
				>
			</div>
			<div class="panel-body" style="width: 100%">
				<div>
					<h3>搜索结果 共 {{ all_pages.length }} 条</h3>
				</div>
				<div id="#pages-container">
					<div
						class="page-container"
						v-for="(page, i) in pages"
						:key="i"
						v-loading="loading"
					>
						<div class="page-info">
							<el-tag>{{ (currentPage - 1) * 10 + i + 1 }}.</el-tag>
							<el-tag type="info">所有者</el-tag>
							<span>{{ page.username }}</span>
							<el-tag type="info">任务</el-tag>
							<span>{{ page.task }}</span>
							<el-tag type="info">页码</el-tag>
							<span>第{{ page.order }}页</span>
						</div>
						<div class="panel panel-default page">
							<div class="panel-heading" style="height: 30%">
								<table
									class="table table-striped table-bordered"
									style="height: 100%; width: 100%; margin: 0"
								>
									<tbody style="height: 100%">
										<tr style="height: 15%; width: 100%">
											<!--1-->
											<th style="width: 8%">案例编号</th>
											<td style="width: 12%" name="case-num">
												{{ page.case_num }}
											</td>
											<th rowspan="2" style="width: 8%">产品名称</th>
											<td rowspan="2" style="width: 12%">
												{{ page.name }}
											</td>
											<th style="width: 8%">版本号</th>
											<td colspan="3" style="width: 32%">
												{{ page.version }}
											</td>
											<th style="width: 8%">记录日期</th>
											<td style="width: 12%">{{ page.date }}</td>
										</tr>
										<tr style="height: 15%; width: 100%">
											<th style="width: 8%">产品分类</th>
											<td style="width: 12%">
												{{ page.product_class }}
											</td>
											<th style="width: 8%">应用分类</th>
											<td colspan="3" style="width: 32%">
												{{ page.app_class }}
											</td>
											<th style="width: 8%">记录人</th>
											<td style="width: 12%" name="recorder">
												{{ page.recorder }}
											</td>
										</tr>
										<tr style="height: 15%; width: 100%">
											<th style="width: 8%">特色类型</th>
											<td style="width: 12%">{{ page.feature }}</td>
											<th rowspan="2" style="width: 8%">特色摘要</th>
											<td colspan="3" rowspan="2" style="width: 32%">
												{{ page.abstract }}
											</td>
											<th rowspan="2" style="width: 8%">关键词</th>
											<td colspan="3" rowspan="2" style="width: 32%">
												{{ page.idea }}
											</td>
										</tr>
										<tr style="height: 15%; width: 100%">
											<th style="width: 8%">案例页数</th>
											<td style="width: 12%">{{ page.page_num }}</td>
										</tr>

										<tr style="height: 30%; width: 100%">
											<th
												style="
													width: 8%;
													background-color: rgb(91, 155, 213);
													color: white;
												"
											>
												详细描述
											</th>
											<td
												style="
													background-color: rgb(91, 155, 213);
													width: 92%;
													color: white;
												"
												colspan="9"
											>
												{{ page.detail }}
											</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="panel-body" style="height: 70%">
								<table class="pictb" style="width: 100%; height: 100%">
									<tr style="height: 10.5%">
										<th style="width: 20%">
											{{ page.pics[0].title }}
										</th>
										<th style="width: 20%">
											{{ page.pics[1].title }}
										</th>
										<th style="width: 20%">
											{{ page.pics[2].title }}
										</th>
										<th style="width: 20%">
											{{ page.pics[3].title }}
										</th>
										<th style="width: 20%">
											{{ page.pics[4].title }}
										</th>
									</tr>
									<tr style="height: 89%">
										<td style="width: 20%; text-align: center">
											<el-image
												id="img0"
												:src="
													page.pics[0].path.slice(0, 5) == 'blob:'
														? page.pics[0].path
														: page.pics[0].path == ''
														? ''
														: '/' + page.pics[0].path
												"
												:preview-src-list="[
													page.pics[0].path == ''
														? ''
														: '/' + page.pics[0].path,
												]"
											>
												<div slot="error" class="image-slot">
													<i class="el-icon-picture-outline"></i>
												</div>
											</el-image>
										</td>
										<td style="width: 20%; text-align: center">
											<el-image
												id="img1"
												:src="
													page.pics[1].path.slice(0, 5) == 'blob:'
														? page.pics[1].path
														: page.pics[1].path == ''
														? ''
														: '/' + page.pics[1].path
												"
												:preview-src-list="[
													page.pics[1].path == ''
														? ''
														: '/' + page.pics[1].path,
												]"
											>
												<div slot="error" class="image-slot">
													<i class="el-icon-picture-outline"></i>
												</div>
											</el-image>
										</td>
										<td style="width: 20%; text-align: center">
											<el-image
												id="img2"
												:src="
													page.pics[2].path.slice(0, 5) == 'blob:'
														? page.pics[2].path
														: page.pics[2].path == ''
														? ''
														: '/' + page.pics[2].path
												"
												:preview-src-list="[
													page.pics[2].path == ''
														? ''
														: '/' + page.pics[2].path,
												]"
											>
												<div slot="error" class="image-slot">
													<i class="el-icon-picture-outline"></i>
												</div>
											</el-image>
										</td>
										<td style="width: 20%; text-align: center">
											<el-image
												id="img3"
												:src="
													page.pics[3].path.slice(0, 5) == 'blob:'
														? page.pics[3].path
														: page.pics[3].path == ''
														? ''
														: '/' + page.pics[3].path
												"
												:preview-src-list="[
													page.pics[3].path == ''
														? ''
														: '/' + page.pics[3].path,
												]"
											>
												<div slot="error" class="image-slot">
													<i class="el-icon-picture-outline"></i>
												</div>
											</el-image>
										</td>
										<td style="width: 20%; text-align: center">
											<el-image
												id="img4"
												:src="
													page.pics[4].path.slice(0, 5) == 'blob:'
														? page.pics[4].path
														: page.pics[4].path == ''
														? ''
														: '/' + page.pics[4].path
												"
												:preview-src-list="[
													page.pics[4].path == ''
														? ''
														: '/' + page.pics[4].path,
												]"
											>
												<div slot="error" class="image-slot">
													<i class="el-icon-picture-outline"></i>
												</div>
											</el-image>
										</td>
									</tr>
								</table>
							</div>
						</div>
						<el-divider></el-divider>
					</div>
				</div>
				<div style="text-align: center">
					<el-pagination
						background
						layout="prev, pager, next"
						:total="all_pages.length"
						:current-page.sync="currentPage"
						@current-change="changePage"
					>
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
module.exports = {
	data: function () {
		return {
			pages: [],
			input: null,
			loading: false,
			all_pages: [],
			currentPage: 1,
		};
	},
	methods: {
		search: function () {
			this.loading = true;
			axios.get(`/search?query=${this.input}`).then((res) => {
				if (res.data == null || res.data.length == 0) {
					this.$message.error("无搜索结果");
					this.loading = false;
					this.pages = [];
					return;
				}
				this.all_pages = res.data;
				for (let page of res.data) {
					let obj = [
						{ order: 0, path: "" },
						{ order: 1, path: "" },
						{ order: 2, path: "" },
						{ order: 3, path: "" },
						{ order: 4, path: "" },
					];
					if (page.pics != undefined) {
						for (let pic of page.pics) {
							obj[pic.order - 1].path = pic.path;
							obj[pic.order - 1].title = pic.title;
						}
					}
					page.pics = obj;
				}
				this.pages = res.data.slice(0, 10);
				this.currentPage = 1;
				this.loading = false;
			});
		},
		changePage(val) {
			this.pages = this.all_pages.slice((val - 1) * 10, val * 10);
		},
	},
};
</script>

<style scoped>
#pages-container {
	width: 90%;
	margin: 0 auto;
}

.page-container {
	width: 90%;
	margin: 0 auto;
}
.page-info {
	width: 100%;
	height: auto;
}

.page {
	width: 1200px;
	height: 648px;
}

input {
	border-color: rgb(174, 180, 180);
	border-style: solid;
	border-width: 1px;
	height: 34px;
}

input:focus {
	border-width: 2px;
	border-color: rgb(64, 158, 255);
}

.pictb {
	background-color: rgb(234, 239, 247);
	border: solid 1px black;
}

.pictb > tbody > tr > th {
	background-color: rgb(210, 222, 239);
	border: solid 1px white;
}

.pictb > tbody > tr > td {
	border: solid 1px white;
	font-size: 13px;
}
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td {
	border: solid 1px rgb(93, 156, 213);
	vertical-align: middle;
	background-color: rgb(189, 215, 238);
}

.table-bordered > tbody > tr > td {
	background-color: rgb(234, 239, 247);
}

td > div > img {
	max-height: 390px;
}
</style>




